chore: update to Tailwind CSS 4.0#125
Open
Junyi-99 wants to merge 10 commits into
Open
Conversation
- Updated `@heroui/react` to version 2.8.9. - Added `@tailwindcss/postcss` and `@tailwindcss/vite` to dependencies. - Modified PostCSS configuration to use `@tailwindcss/postcss`. - Updated Vite configuration to include Tailwind CSS plugin. - Adjusted various CSS classes for consistency and improved styling. - Introduced a new `hero.ts` file for Heroui integration. - Enhanced component styles and accessibility across multiple files.
- Upgraded various dependencies including `@bufbuild/protobuf`, `@grafana/faro-web-sdk`, and `@tanstack/react-query`. - Updated development dependencies such as `@codemirror/state`, `@eslint/js`, and `typescript`. - Enhanced overall package stability and performance by aligning versions across multiple libraries.
- Added `tw-shimmer` dependency to enhance loading animations in the application. - Updated CSS imports to include `tw-shimmer` for improved visual effects. - Refactored loading indicators across components to utilize the new shimmer effect, enhancing user experience during loading states. - Removed redundant custom shimmer styles to streamline code and improve maintainability.
- Changed fallback model details to reflect the new GPT-5.1 version, including updated slug, name, context, and pricing. - Updated last used model slug in conversation UI store to GPT-5.1. - Modified devtools to utilize the new model slug for assistant messages.
- Updated `immer` version in `bun.lock` and `package.json` to remove caret (^) for consistency. - Changed `@types/chrome` version to a more specific version. - Downgraded `eslint` and related plugins to align with project requirements. - Updated TypeScript configuration to target ES2022 for improved compatibility. - Refactored Vite configuration to remove unnecessary imports and streamline the setup. - Enhanced selection store types for better state management.
- Introduced path aliases in `tsconfig.app.json` for easier imports: `@` for `./src/*` and `@gen` for `./src/pkg/gen/*`. - Updated Vite configuration to resolve these aliases, enhancing module resolution. - Refactored multiple components and hooks to utilize the new import paths, improving code readability and maintainability. - Removed the `converters.ts` file as it was no longer needed, streamlining the codebase.
- Added Tailwind CSS plugin to the Vite configuration for improved styling capabilities. - Introduced path aliases for easier module resolution, allowing imports to be simplified. - Updated the Vite configuration to reflect these changes, enhancing development experience.
- Tailwind v4.2.0 → v4.3.1 (free bugfixes: @apply mixins, Vite sourcemaps, @source glob, Vite alias resolution). - Fix 3 lint errors surfaced after merging staging: - assistant.tsx: drop useless `let regularContent = message` init. - apiclient.ts: attach `cause` when rethrowing network error. - apiclient.ts: drop useless `let endpoint = ""` init. Build passes (all 5 targets), lint clean (0 errors). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe
Reconcile the Tailwind v4 upgrade with the CSS-isolation + OTEL work that landed on staging (via #169 back-porting #168). Resolution: - CSS isolation kept on the PostCSS path: postcss.config.js runs @tailwindcss/postcss then postcss-prefix-selector (.pd-scope) for the default content-script build. Dropped @tailwindcss/vite — the Vite plugin bypasses PostCSS, which would break the prefix step. Verified: 3086 .pd-scope prefixes emitted in the default bundle. - tailwind.config.js deleted (v4 ports it to CSS: @theme/@plugin/@source/ @custom-variant in index.css), per the v4 upgrade guide. - vite.config.ts: staging's produce()-based config + #125 path aliases. Added setAutoFreeze(false) — immer froze the config and Vite mutates resolve.conditions at startup. - package.json: dropped Faro (staging replaced it with OpenTelemetry), kept OTEL + web-vitals + apple-sign-in, took #125's version bumps, dropped autoprefixer (v4 built-in). Aligned @eslint/js to eslint 9 (eslint 10 pulls react-hooks 7 which floods 44 new-rule errors — separate migration). - Regenerated bun.lock and package-lock.json. Build: exit 0, all 5 targets. Lint: 0 errors. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request focuses on modernizing the UI codebase and updating dependencies for improved stability and consistency. The most significant changes include upgrading various dependencies in
package.json, standardizing the usage of utility class syntax (notably the placement of!for Tailwind overrides), and refactoring shimmer/loading indicator styles to use a shared CSS class. These updates collectively enhance maintainability, visual consistency, and compatibility with newer tooling.Dependency upgrades and tooling modernization:
package.jsonto newer versions, including major upgrades forreact,react-dom,axios,immer,streamdown,uuid, and several dev tools. Added@tailwindcss/postcss,@tailwindcss/vite,tailwindcss, andtw-shimmerfor improved styling and loading effects.postcss.config.jsto use@tailwindcss/postcssinstead of the generictailwindcssandautoprefixerplugins, aligning with the new dependency setup.UI styling and class syntax standardization:
!modifier to the end of each class for consistency and to match modern conventions. This affects components likecell-wrapper,message-card,message-entry-container,attachment-popover,add-comments-button, andcomment-item. [1] [2] [3] [4] [5] [6] [7] [8]Shimmer/loading indicator improvements:
shimmerCSS class for loading indicators and tool cards, simplifying code and ensuring consistent loading effects. This change impactsloading-indicator.tsx,toolcall-prepare.tsx, andtools/general.tsx. [1] [2] [3] [4] [5] [6]Minor UI and accessibility tweaks:
Removal of unused code:
These changes collectively improve the project's maintainability, visual consistency, and readiness for future updates.